/*
* 组件模块：相关产品
* props: goodsId
* 数据：不做ssr，直接ajax获取数据
*/
import React from 'react';
import Link from 'next/link';
import { replaceImageUrl, targetUrl } from '@/utils';
// css
import styles from '@/styles/CommonDetail.module.scss';
// api
import { relateProduct } from '@/api/guide';

class RelateProductPart extends React.Component {

    constructor(props) {
        super(props)
    }

    render() {
        const { list } = this.state;
        if (list.length < 3) {
            return <></>
        }
        return (
            <section className={styles['relate-wrap']}>
                <h2>相关产品</h2>
                <div className={styles['relate-pro-list']}>
                    {
                        list.map(data => {
                            return (
                                <div className={styles['item']} key={data.id}>
                                    <Link href={targetUrl(data)}>
                                        <a target="_blank">
                                            <img src={replaceImageUrl(data.thumbnail)} alt="" />
                                            <h3>{`${data.goodsName}`}</h3>
                                        </a>
                                    </Link>
                                    <p className={styles['price']}>
                                        ￥<em>{data.price}</em><span>起</span>
                                    </p>
                                </div>
                            )
                        })
                    }
                </div>
            </section>
        )
    }

    state = {
        list: []
    }

    componentDidMount() {
        const { goodsIds } = this.props;
        relateProduct(goodsIds).then(res => {
            if (res.code === 0) {
                this.setState({
                    list: res.data.slice(0,5)
                })
            }
        })
    }
}

export default RelateProductPart